<template>
	<view>
		<view class="container">
			<view class="chapterName">{{bookInfo.chapterName}}</view>
			<view v-for="(item,index) in bookInfo.paragraphs" :key="index">
				<text class="paragraphs">{{item}}</text>
			</view>
		</view>

		<movable-area class="right-func">
			<movable-view :x="chapterFunc.x" :y="chapterFunc.y" direction="all">
				<view class="chapter-func">
					<button class="chapter-btn" hover-class="chapter-btn_hover" size="mini" @click="showChapterMenuClick">目录</button>
					<button v-if="hasPre" class="chapter-btn" hover-class="chapter-btn_hover" size="mini" @click="onChapterClick('pre')">上一章</button>
					<button v-if="hasNext" class="chapter-btn" hover-class="chapter-btn_hover" size="mini" @click="onChapterClick('next')">下一章</button>
				</view>
			</movable-view>
		</movable-area>
		<view class="chapterMenuLayout" :class="[{'chapterMenu_show':showChapterMenu},{'chapterMenu_hide':!showChapterMenu}]">
			<scroll-view class="scroll-chapterMenu" scroll-y="true">
				<view class="chapterMenu-title">目录</view>
				<block v-for="(item,index) in chapterMenu" :key="index">
					<view class="chapter-item" :style="{color:index==curIndex?'#f1d20b':''}" @click="onChapterItemClick(index)">
						{{item}}
					</view>
				</block>
			</scroll-view>
			<view class="empty-view" @click="onMenuEmptyClick"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bookName: '',
				bookInfo: {},
				curIndex: 0,
				curChapter: '',
				hasPre: false,
				hasNext: false,
				chapterMenu: [],
				chapterFunc: {
					x: 70,
					y: 250
				},
				showChapterMenu: false
			}
		},
		onLoad: function(options) {
			console.log(options)
			var chapterIndex = decodeURIComponent(options.chapterIndex)
			var chapterName = decodeURIComponent(options.chapterName)
			var bookName = decodeURIComponent(options.bookName)
			uni.setNavigationBarTitle({
				title: bookName
			})
			this.getBookMeun(bookName, chapterName, chapterIndex)
		},
		methods: {
			//获取目录数据
			getBookMeun(bookName, chapterName, chapterIndex) {
				uniCloud.callFunction({
					name: 'database',
					data: {
						collection: 'oldbook',
						type: 'chapter',
						bookName: bookName
					},
					success: (res) => {
						console.log(res)
						let result = res.result.data
						if (result && result.length > 0) {
							let oldBook = result[0]
							this.bookName = bookName
							this.chapterMenu = oldBook.chapters
							this.getChapterInfo(chapterIndex)
						}
					}
				})
			},
			//获取目录下的内容
			getChapterInfo(chapterIndex) {
        this.$tools.showLoading()
				this.getPreNextProcess(chapterIndex)
				uniCloud.callFunction({
					name: 'database',
					data: {
						collection: 'oldbook',
						type: 'paragraph',
						bookName: this.bookName,
						chapterName: this.curChapter
					},
					success: (res) => {
            uni.hideLoading()
						console.log(res)
						let result = res.result.data
						if (result && result.length > 0) {
							var bookInfo = result[0]
							this.bookInfo = bookInfo
							this.backTop()
						}
					}
				})
			},
			getPreNextProcess(curIndex) {
				curIndex = parseInt(curIndex)
				let chapterMenu = this.chapterMenu
				//是否有上一页或者下一页
				var hasPre = true
				if (curIndex == 0)
					hasPre = false
				var hasNext = true
				if (curIndex == chapterMenu.length - 1)
					hasNext = false
				this.hasPre = hasPre
				this.hasNext = hasNext
				this.curIndex = curIndex
				this.curChapter = chapterMenu[curIndex]
			},
			//上一章或下一章点击监听
			onChapterClick(flag) {
				var mIndex = this.curIndex
				if (flag == "next") {
					mIndex = mIndex + 1
				} else {
					mIndex = mIndex - 1
				}
				this.getChapterInfo(mIndex)
			},
			//章节目录按钮点击监听
			showChapterMenuClick(e) {
				this.showChapterMenu = true
			},
			//背景点击监听
			onMenuEmptyClick() {
				setTimeout(() => {
					this.showChapterMenu = false
				}, 200)
			},
			//章节item点击监听
			onChapterItemClick(itemIndex) {
				this.getChapterInfo(itemIndex)
				this.onMenuEmptyClick()
			},
			// 滚动到顶部
			backTop() {
				// 控制滚动
				uni.pageScrollTo({
					scrollTop: 0
				})
			}
		}
	}
</script>

<style>
	text {
		display: flex;
		font-family: PingFangSC-Regular;
		font-weight: 500;
	}

	page {
		background: #d6cebf;
	}

	.container {
		width: calc(100%-15px);
		padding: 15px;
	}

	.chapterName {
		text-align: center;
		font-size: larger;
		font-weight: 600;
		margin-bottom: 10px;
	}

	.paragraphs {
		margin-bottom: 5px;
	}

	.right-func {
		top: 0px;
		right: 0px;
		width: 100px;
		height: 100%;
		position: fixed;
	}

	.chapter-func {
		width: 80px;
		/* background: blue; */
	}

	.chapter-btn {
		color: white;
		margin: 10px 0px;
		background: #ad605a;
	}

	.chapter-btn_hover {
		background: #c64b42;
	}

	.chapterMenuLayout {
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: fixed;
		display: flex;
		z-index: 10;
	}

	.chapterMenu_show {
		/* 动画 */
		transform: scaleX(1);
		transition: transform 0.8s;
		transform-origin: left center;
	}

	.chapterMenu_hide {
		/* 动画 */
		transform: scaleX(0);
		transition: transform 0.8s;
		transform-origin: left center;
	}

	.scroll-chapterMenu {
		width: 80%;
		background: #6d6b68;
	}

	.chapterMenu-title {
		margin: 10px;
		text-align: center;
		font-size: 18px;
		font-weight: 600;
	}

	.chapter-item {
		/* color: #ed9f35; */
		color: #d5a55f;
		padding: 3px;
	}

	.empty-view {
		width: 20%;
		background: black;
		opacity: 0.4;
	}
</style>
